<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>室内定位</title>
		<link rel="stylesheet" href="lib/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
		<script src="https://lib.baomitu.com/socket.io/2.0.1/socket.io.js"></script>
		<script src="js/math.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div id="fengMap"></div>
		<!--<div class="send" style="position: absolute;width: 80px;height: 80px;border: 1px sold;">
			发送
		</div>-->
		<!-- 视角按钮组 -->
		<div class="viewmode-group btn-group-vertical" data-toggle="buttons">
			<button class="btn btn-default">2D</button>
			<button class="btn btn-default btn-primary">3D</button>
		</div>

		<script src="lib/jquery-2.1.4.min.js"></script>
		<script src="lib/fengmap.min.js"></script>
		<script>
			//获取版本号,设置title
			document.title = '室内定位' + fengmap.VERSION;

			//定义全局map变量
			var map;
			var fmapID = 'location-test';
			var locationMarker;
			//楼层ID
			var lastGid = null;
			//第一人称、第三人称控制开关；定位跟随开关
			var others = true;
			var getData = {
				x: 14,
				y: 2
			}
			var layer = null
			var resultData = CoordTransform(getData)

			//起点终点坐标
			var points = [{
					'x': 13028213.4785,
					'y': 4737008.7298,
					groupID: 1
				},
				{
					x: 12961699.79823795,
					y: 4861826.46384646,
					groupID: 6
				}
			];
			window.onload = function() {
				map = new fengmap.FMMap({
					//渲染dom
					container: document.getElementById('fengMap'),
					//地图数据位置
					mapServerURL: './data/' + fmapID,
					//主题数据位置
					mapThemeURL: 'data/theme/',
					//设置主题
					defaultThemeName: '2001',
					// 默认比例尺级别设置为20级
					defaultMapScaleLevel: 22,
					//开启2维，3维切换的动画显示
					viewModeAnimateMode: true,
					//方向枚举型。可设置正南、正北、正东、正西、东南、西南等方向值。具体可参考fengmap.ControlsPoseEnum类。NORTH WEST SOUTH
					defaultControlsPose: fengmap.FMDirection.NORTH,
					defaultViewMode: fengmap.FMViewMode.MODE_2D, //初始二维还是三维状态，三维状态为MODE_3D,

					//开发者申请应用下web服务的key
					key: '670072019dff394f3f991e88e98024d5',
					//开发者申请应用名称
					appName: 'innerMap',
				});

				//打开Fengmap服务器的地图数据和主题
				map.openMapById(fmapID);

				//显示指北针
				map.showCompass = true;
				//地图加载完成回调
				map.on('loadComplete', function() {
					WebSocketTest();

					addlocationMarker(points[0])
				});

				var aBtn = document.querySelectorAll('.btn');
				//开启2维模式
				aBtn[0].onclick = function() {
					//设置地图为2维模式
					map.viewMode = fengmap.FMViewMode.MODE_2D;
					this.classList.add('btn-primary');
					aBtn[1].classList.remove('btn-primary');
				};

				//开启3维模式
				aBtn[1].onclick = function() {
					//设置地图为3维模式
					map.viewMode = fengmap.FMViewMode.MODE_3D;
					this.classList.add('btn-primary');
					aBtn[0].classList.remove('btn-primary');
				};

				//添加定位点图层
				function addlocationMarker(coord) {
					locationMarker = new fengmap.FMLocationMarker({
						//设置图片的路径
						url: 'image/pointer.png',
						//设置图片显示尺寸
						size: 46,
						//设置图片高度
						height: 1,
					});
					//添加定位点标注
					map.addLocationMarker(locationMarker);
					//设置定位图标位置
					setLocationMakerPosition(coord);
					return locationMarker;
				};

				//添加图片标签层
				function addImageMar(coord) {

					//					if(layer) {
					//						layer.removeAll();
					//					}
					//					//添加标注的当前楼层，方便移除的时候查找
					//					var group = map.getFMGroup(map.groupIDs[0]);
					//					layer = new fengmap.FMImageMarkerLayer();
					//					group.addLayer(layer);

					//					var im = new fengmap.FMImageMarker({
					//						x: coord.x,
					//						y: coord.y,
					//						id: '103470134',
					//						name: '测试ImageMarker',
					//						//图片地址
					//						url: 'image/pointer.png',
					//						//图片大小
					//						size: 32,
					//						callback: function() {
					//							// 在图片载入完成后，设置 "一直可见"
					//							im.alwaysShow();
					//						}
					//					});
					//
					//					layer.addMarker(im);
				};

				//设置图片标注点位置信息
				function setLocationMakerPosition(coord, angle, direction) {
					var data = {
						//设置定位点的x坐标
						x: coord.x,
						//设置定位点的y坐标
						y: coord.y,
						//设置定位点所在楼层
						groupID: coord.groupID,
						time: .50,
						callback: function() {
							//回调函数
						},
						zOffset: 1
					};
					//设置定位图标旋转角度
					if(direction) {
						locationMarker.rotateTo(-direction);
						if(others) {
							map.rotateTo({
								to: direction,
								time: 1
							});
						}
					}
					//不同楼层
					if(lastGid !== coord.groupID) {
						lastGid = coord.groupID;
						locationMarker.setPosition(data);
					}
					locationMarker.moveTo(data);
					map.moveTo({
						x: coord.x,
						y: coord.y,
						groupID: coord.groupID,
						time: 1
					});
					//					locationMarker.direction = direction;
					//					locationMarker.direction = 45;
					//					console.log('direction', direction)
					//					if(direction) {
					//						locationMarker.direction = direction;
					//					} else {
					//						locationMarker.direction = 0;
					//					}

				}

				function WebSocketTest() {
					if("WebSocket" in window) {
						// 打开一个 web socket
						//						var ws = new WebSocket("ws://172.16.10.13:8077/dowin-blue-tooth/api/websocket/openId");
//												var ws = new WebSocket("ws://dowin.natapp1.cc/dowin-blue-tooth/api/websocket/openId");
						//阿里云服务器websocket地址
						var ws = new WebSocket("wss://dowin.natapp4.cc/dowin-blue-tooth/api/websocket/openId");
						//王哥本地
//						var ws = new WebSocket("ws://dowin.natapp1.cc/api/websocket/openId");
						//						ws://dowin.natapp1.cc/api/websocket/openId

						ws.onopen = function() {
							setInterval(function() {
								// Web Socket 已连接上，使用 send() 方法发送数据
								ws.send("保持心跳");
							}, 50000)
						};

						ws.onmessage = function(evt) {
							var received_msg = evt.data;
							console.log('收到消息：', received_msg)
							//							if(received_msg && (received_msg.split(',').length === 2) && received_msg.split(',')[0] && received_msg.split(',')[1]) {
							if(received_msg && received_msg.split(',')[0] && received_msg.split(',')[1]) {
								if(isNaN(received_msg.split(',')[0]) || isNaN(received_msg.split(',')[1])) {
									return false;
								}
								if(!(isFinite(received_msg.split(',')[0])) || !(isFinite(received_msg.split(',')[1]))) {
									return false;
								}

								//								if(received_msg.split(',')[0]>0 && received_msg.split(',')[1]>0 && received_msg.split(',')[0]<32 && received_msg.split(',')[1]<32) {
								//		return false;
//								var ggg = JZ(received_msg.split(',')[0], received_msg.split(',')[1], 1);
//								console.log('ggg', ggg);
								
								var newCoord = {
									'x': received_msg.split(',')[0],
									'y': received_msg.split(',')[1]
								}

								var direction = received_msg.split(',')[2];

								//转换后的地图坐标
								var mapCoord = CoordTransform(newCoord);
								//							var mapCoord = trasformer.transform(newCoord);
								//删除
								//								locationMarker.removeAll ()

								//								addlocationMarker(mapCoord)
								setLocationMakerPosition(mapCoord, null, direction);
								//								}
							}
						};

						ws.onclose = function() {
							// 关闭 websocket
							console.log('连接已关闭')
						};
					} else {
						// 浏览器不支持 WebSocket
						alert("您的浏览器不支持 WebSocket!");
					}
				}
			};

			function CoordTransform(Coord) {
				//创建转换器
				var trasformer = new fengmap.MapCoordTransform();
				//来至定位系统的参数 定位的原点坐标 已经定位的范围,(矩形对角线的2个点)
				var locOrigion = {
					'x': 0,
					'y': 0
				}; //定位坐标原点
				var locRange = {
					'x': 32.387,
					'y': 32.202
				}; //定位范围

				//根据定位四个角点的地图坐标点
				var mapParas = [];
//				mapParas[0] = {
//					'x': 13028214.3369,
//					'y': 4737041.7511
//				}; //定位原点地图坐标
//				mapParas[1] = {
//					'x': 13028214.2996,
//					'y': 4737009.4296
//				}; //X轴终点地图坐标
//				mapParas[2] = {
//					'x': 13028246.4345,
//					'y': 4737009.5043
//				}; //定位原点对角点地图坐标
//				mapParas[3] = {
//					'x': 13028246.5092,
//					'y': 4737041.7885
//				}; //Y轴终点地图坐标
				
				mapParas[0] = {
					'x': 13028246.5092,
					'y': 4737041.7885
				}; //定位原点地图坐标
				mapParas[1] = {
					'x': 13028214.3369,
					'y': 4737041.7511
				}; //X轴终点地图坐标
				mapParas[2] = {
					'x': 13028214.2996,
					'y': 4737009.4296
				}; //定位原点对角点地图坐标
				mapParas[3] = {
					'x': 13028246.4345,
					'y': 4737009.5043
				}; //Y轴终点地

				//转换器初始化
				trasformer.init(locOrigion, locRange, mapParas);

				//定位系统中的定位坐标
				var loc = {
					'x': Coord.x,
					'y': Coord.y
				}; //定位系统所返回的坐标点

				//转换后的地图坐标
				var mapCoord = trasformer.transform(loc);
				return mapCoord;
			}

			//矩阵滤波
			var JZ = function(x, y, bt) {
				var xt = math.matrix([
					[x],
					[y],
					[0],
					[0]
				]);
				var yt = math.matrix([
					[0],
					[0]
				]);
				var F = math.matrix([
					[1, 0, bt, 0],
					[0, 1, 0, bt],
					[0, 0, 1, 0],
					[0, 0, 0, 1]
				]);
				var Ft = math.transpose(F);
				var M = math.matrix([
					[1, 0, 0, 0],
					[0, 1, 0, 0],
					[0, 0, 1, 0],
					[0, 0, 0, 1]
				]);
				var Q = math.matrix([
					[0.2, 0, 0, 0],
					[0, 0.2, 0, 0],
					[0, 0, 0.2, 0],
					[0, 0, 0, 0.2]
				]);
				var R = math.matrix([
					[1, 0],
					[0, 1]
				]);
				var H = math.matrix([
					[1, 0, 0, 0],
					[0, 1, 0, 0]
				]);
				var ht = math.transpose(H);
				var I = math.matrix([
					[1, 0, 0, 0],
					[0, 1, 0, 0],
					[0, 0, 1, 0],
					[0, 0, 0, 1]
				]);

				//第一个公式
				var Xt = math.multiply(F, xt);
				// console.log('Xt', Xt)
				//第二个公式
				var temp1 = math.multiply(F, M);
				var temp2 = math.multiply(temp1, Ft);
				var Mt = math.add(temp2, Q);
				// console.log('Mt', Mt)
				//			//第三个公式
				var temp3 = math.multiply(Mt, ht); //第一个乘法
				// console.log('temp3', temp3)
				var temp4 = math.multiply(H, Mt); //括号里的第一个乘法
				// console.log('temp4', temp4)
				var temp5 = math.multiply(temp4, ht);
				// console.log('temp5', temp5)
				var temp6 = math.add(temp5, R);
				// console.log('temp6', temp6)
				var temp7 = math.inv(temp6);
				// console.log('temp7', temp7)
				var Kt = math.multiply(temp3, temp7);
				// console.log('Kt', Kt);
				//			//第四个公式
				var temp8 = math.multiply(H, Xt); //括号里乘法
				// console.log('temp8', temp8)

				var temp9 = math.subtract(yt, temp8);
				// console.log('temp9', temp9)

				var temp10 = math.multiply(Kt, temp9);
				// console.log('temp10', temp10)

				var Xt2 = math.add(Xt, temp10);
				// console.log('Xt2', Xt2)
				//			//第五个公式
				var temp11 = math.multiply(Kt, H); //括号里乘法
				// console.log('temp11', temp11)
				var temp12 = math.subtract(I, temp11);
				// console.log('temp12', temp12)

				var result = math.multiply(temp12, Mt);
				console.log('result', result)
				return Xt2;
			}
		</script>

		<!--<script type="text/javascript">
			var socket = io('http://localhost:8360');

			$('.send').on('click', function(evt) {
			});

			socket.on('opend', function(data) {
				console.log('收到消息:', data);
				setInterval(function(){
					socket.emit('addUser', 'bbbb');
				}, 80000)
			});

			socket.on('joined', function(data) {
				console.log('joined:', data);
			});
			socket.on('send', function(data) {
				console.log('send:', data);
			});
		</script>-->
	</body>

</html>